import React, { Component } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import Button from '@mui/material/Button';
import Client from '../Client';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableHead from '@mui/material/TableHead';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import Toolbar from '@mui/material/Toolbar';
import AppBar from '@mui/material/AppBar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';

const DlgItems=(props)=>{
  let init_state = {
    items: [],
    start: 0,
    total: 0,
    search: '',
    start_input: 1,
    showModal: false,
    error: '',
    lbls: [],
    values: [],
    newPackName: '',
    newname: '',
    auto_value: '',
    auto_items: [],
    auto_loading: false,
  };
  const [state,setState]=React.useState(init_state)
  const loaddata = () => {
    console.log("loaddata=====")
    console.log(state)
    Client.get(
      '/rest/realtime/',
      {
        start: state.start,
        limit: state.limit,
        query: state.search,
      },
      (contacts2) => {
        console.log("get data result:")
        console.log(contacts2);
        setState((state)=>({...state,items: contacts2.data, //.slice(0, MATCHING_ITEM_LIMIT),
          total: contacts2.total,
          start: state.start,}));
        state.total = contacts2.total;
      }
    );
  };
  React.useEffect(()=>{
    loaddata();
  },[]);

  const handlePrev = (e) => {
    state.start = state.start - state.limit;
    if (state.start < 0) {
      state.start = 0;
    }
    loaddata();
  };
  const handlePackItemChange = (idx, contact) => {
    console.log(idx);
    const contacts2 = update(state.items, { [idx]: { $set: contact } });
    console.log(contacts2);
    setState((state)=>({...state,items: contacts2}));
  };
  const handleNext = (e) => {
    state.start = state.start + state.limit;
    if (state.start > state.total - state.limit)
      state.start = state.total - state.limit; //total >limit
    if (state.start < 0) {
      state.start = 0;
    }
    loaddata();
  };
  const jump = () => {
    state.start = parseInt(state.start_input, 10) - 1;
    if (state.start > state.total - state.limit)
      state.start = state.total - state.limit; //total >limit
    if (state.start < 0) {
      state.start = 0;
    }
    loaddata();
  };
  const handlePageChange = (e) => {
    setState((state)=>({...state,start_input: e.target.value}));

  };
  const handleSearchChange = (e) => {
    state.search = e.target.value;
    setState((state)=>({...state,search: state.search }));
    console.log(state)
    console.log(state)
  };
  const search = (e) => {
    state.start = 0;
    loaddata();
  };
  const handleEdit = (idx) => {
    refs.dlg.open2(idx);
  };
  const mapfunc = (contact, idx) => {
      return (
        <TableRow key={idx}>
          <TableCell>{contact.Device_ID}</TableCell>
          <TableCell>{contact.Device_Status}</TableCell>
        </TableRow>
      );
  };
    console.log("state")
    console.log(state)
    const contactRows = state.items.map(mapfunc);
    var hasprev = true;
    var hasnext = true;
    let prev;
    let next;
    //console.log(state);
    //console.log(state);
    if (state.start === 0) {
      hasprev = false;
    }
    //console.log(state.start+state.limit>=state.total);
    if (state.start + state.limit >= state.total) {
      hasnext = false;
    }
    if (hasprev) {
      prev = (
        <Button variant="contained" onClick={handlePrev}>
          前一页
        </Button>
      );
    } else {
      prev = null;
    }
    if (hasnext) {
      next = (
        <Button variant="contained" onClick={handleNext}>
          后一页
        </Button>
      );
    } else {
      next = null;
    }

    return (
      <div>
        <div >
          <Toolbar>
            <Typography variant="h6" >
              备件
            </Typography>
            <input
              type="text"
              value={state.search}
              placeholder=""
              onChange={handleSearchChange}
            />
            <Button id="id_bt_search" variant="contained" onClick={search}>
              搜索
            </Button>
          </Toolbar>
        </div>
        <div>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>ID</TableCell>
                <TableCell>state</TableCell>
              </TableRow>
            </TableHead>
            <TableBody id="contact-list">{contactRows}</TableBody>
          </Table>
          {prev}
          <label id="page">
            {state.start + 1}../{state.total}
          </label>
          {next}
          <input
            maxLength="6"
            size="6"
            onChange={handlePageChange}
            value={state.start_input}
          />
          <Button
            variant="contained"
            id="page_go"
            className="btn btn-info"
            onClick={jump}
          >
            跳转
          </Button>
        </div>
      </div>
    );
};

export default DlgItems
